<template>
  <div class="content">
    <div class="content-title">
      <div style="font-family: '微软雅黑'; font-size: 18px; font-weight: bold"
        >待办事项统计
      </div>
    </div>
    <div class="content-box">
      <div class="left-box">
        <div style="width: 25%">
          <a-space direction="vertical" fill>
            <a-progress type="circle" :percent="0.2" /><div
              >待排程
            </div></a-space
          ></div
        >
        <div style="width: 25%">
          <a-space direction="vertical" fill>
            <a-progress type="circle" status="warning" :percent="0.2" /><div
              >待发货
            </div></a-space
          ></div
        >
        <div style="width: 25%">
          <a-space direction="vertical" fill>
            <a-progress type="circle" status="danger" :percent="0.2" /><div
              >待领料
            </div></a-space
          ></div
        >
        <div style="width: 25%">
          <a-space direction="vertical" fill>
            <a-progress type="circle" status="success" :percent="0.2" /><div
              >待报工
            </div></a-space
          ></div
        >
      </div>
      <div class="right-box">
        <div class="big-box">
          <a-space :size="30">
            <div class="ring-box"
              ><i class="iconfont icon-shengchanshebei"></i
            ></div>
            <div class="SeeData">
              <a-space direction="vertical" fill :size="18">
                <div
                  style="
                    font-family: '微软雅黑';
                    font-size: 18px;
                    font-weight: bold;
                  "
                  >已完成 </div
                ><div>
                  <span
                    style="
                      font-family: '微软雅黑';
                      font-size: 18px;
                      font-weight: bold;
                    "
                    >15&nbsp;</span
                  ><span>/ 60</span></div
                >
              </a-space>
            </div>
          </a-space>
        </div>
        <div class="small-box">
          <div>完成率</div>
          <div> <a-progress status="warning" :percent="0.2" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
</script>

<style scoped lang="less">
  .content {
    width: 100%;
    height: 210px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;

    &-title {
      width: 100%;
      height: 20%;
      padding: 15px;
    }
    &-box {
      height: 170px;
      // line-height: 170px;
      display: flex;
      justify-content: space-around;
      padding: 10px;
      .left-box {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
      }
      .right-box {
        width: 30%;
        background: inherit;
        background-color: rgba(242, 248, 255, 1);
        border: none;
        border-radius: 8px;
        margin-right: 20px;
        .big-box {
          width: 100%;
          height: 70%;
          display: flex;
          justify-content: center;
          align-items: center;
          .ring-box {
            width: 70px;
            height: 70px;
            border-radius: 100%;
            background-color: rgb(65, 134, 252);
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .small-box {
          width: 100%;
          height: 30%;
          background: inherit;
          background-color: rgba(226, 237, 254, 1);
          border-radius: 0 0px 8px 8px;
          padding: 10px;
        }
      }
    }
  }

  :deep(.iconfont) {
    font-size: 30px;
    color: #fff;
  }
</style>
